<template>
  <div class="login">
    <div class="center">
      <div class="zhong">
        <div class="input">
          <p>用户名</p>
          <input type="text" v-model="uname" />
          <span class="span">6~15数字或字母</span>
        </div>
        <div class="input">
          <p>密码</p>
          <input type="password" v-model="upwd" />
          <span class="span">6~12数字或字母</span>
        </div>
        <div class="input">
          <p>确认密码</p>
          <input type="password" v-model="rpwd" />
        </div>
        <div>
          <input type="checkbox" class="checkbox" /><span
            >记住我(请在私人设备上使用此功能)</span
          >
        </div>
        <div class="button">
          <button @click="register">注册</button>
          <button @click="login">登录</button>
        </div>
      </div>
      <div class="close" v-show="flag">
        <p></p>
        <span @click="close(res)">×</span>
      </div>
      <div class="ltk" v-show="flag"></div>
    </div>
  </div>
</template>




<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      rpwd: "",
      flag: false,
      res: "",
    };
  },
  methods: {
    ...mapActions(["vregister"]),
    close() {
      this.flag = false;
    },
    checkName() {
      // 验证用户名是否符合要求
      let reg = /^\w{6,15}$/;
      if (reg.test(this.uname)) {
        return true;
      } else {
        return false;
      }
    },
    checkPwd() {
      // 验证密码是否符合要求
      let reg = /^\d{6,12}$/;
      if (reg.test(this.upwd)) {
        return true;
      } else {
        return false;
      }
    },
    // 界面登陆做跳转
    login() {
      this.$router.push("/login");
    },
    // 模态框关闭
    close(res) {
      if (res == "注册成功") {
        this.flag = false;
        let center = document.querySelector(".center");
        center.style.opacity = "0";
        setTimeout(() => {
          this.$router.push("/login");
        }, 1000);
      } else {
        this.flag = false;
      }
    },
    checkRpwd() {
      // 验证密码是否符合要求
      let reg = /^\d{6,12}$/;
      if (reg.test(this.rpwd) && this.upwd == this.rpwd) {
        return true;
      } else {
        return false;
      }
    },

    register() {
      // 注册按钮判断密码和用户民格式正确
      if (this.checkName() && this.checkPwd() && this.checkRpwd()) {
        // 调用vuex action方法异步请求顺序执行
        this.vregister({
          uname: this.uname,
          upwd: this.upwd,
        })
          .then((result) => {
            this.flag = true;
            document.querySelector(".close p").innerHTML = "注册成功";
            this.res = "注册成功";
            // console.log(result);
          })
          .catch((msg) => {
            this.flag = true;
            document.querySelector(".close p").innerHTML = msg;
            this.res = msg;
          });
      } else {
        this.flag = true;
        document.querySelector(".close p").innerHTML = "用户名或密码格式错误";
        this.res = "用户名或密码格式错误";
      }
    },
  },
};
</script>


<style>
.login .span {
  display: inline-block;
  width: 100px;
  font-size: 12px;
  padding-left: 20px;
  color: #bbb;
}
.login {
  width: 100%;
  height: 800px;
  /* background-color: #eee; */
  overflow: hidden;
}
.login .ltk {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 580px;
  height: 508px;
  /* background-color: #eee; */
}
.login .center .close {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 100px;
  z-index: 20;
  transform: translate(-50%, -100%);
  background-color: rgba(189, 132, 72, 0.5);
  text-align: center;
  color: white;
  line-height: 100px;
}
.login .center .close span {
  position: absolute;
  top: -40px;
  right: 0;
  width: 20px;
  height: 20px;
  font-size: 20px;
  cursor: pointer;
}

.login .center {
  position: relative;
  width: 580px;
  height: 508px;
  box-shadow: 0px 0px 20px #ccc;
  border-radius: 5px;
  margin: 100px auto 0;
  overflow: hidden;
  transition: all linear 1s;
  opacity: 1;
}
.login .center .zhong {
  width: 480px;
  height: 384px;
  /* background-color: #eee; */
  margin: 50px 80px 0;
  padding: 0 15px;
}
.login .center .zhong .input {
  margin-bottom: 18px;
}
.login .center .zhong .input p {
  font-size: 13px;
  color: #333;
  margin-bottom: 8px;
}
.login .center .zhong .input input {
  width: 330px;
  height: 34px;
  border: 0;
  padding: 0 8px;
  border: 1px solid #eee;
  border-radius: 3px;
  background-color: #fafafa;
}
.login .center .zhong .checkbox {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border: 1px solid #eee !important;
  margin-right: 10px;
}
.login .center .zhong input[type="checkbox"] + span {
  font-size: 13px;
  color: #888888;
}
.login .center .zhong .button {
  width: 348px;
  height: 174px;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #e5e5e5;
}
.login .center .zhong .button button {
  width: 348px;
  height: 38px;
  border-radius: 3px;
  border: 0;
  padding: 2px;
  margin: 0 15px 5px 0;
}
.login .center .zhong .button button:first-child {
  background-color: #bd8448;
  color: white;
}
.login .center .zhong .button button:nth-child(2) {
  border: 1px solid #ddd;
  color: #000;
}
.login .center .zhong .forget {
  font-size: 13px;
  color: #000;
  text-align: right;
  cursor: pointer;
}
</style>